<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="isShow"
      @close="handleClose"
    >
      <el-form>
        <el-row style="height: 50px;">
          <el-form-item>
            <template>
              <el-col :span="6">【题型】：  {{questionType}}</el-col>
              <el-col :span="6">【编号】：  {{itemList.id}}</el-col>
              <el-col :span="6">【难度】：  {{difficulty}}</el-col>
              <el-col :span="6"> 【标签】：  {{itemList.tags}}</el-col>
            </template>
          </el-form-item>
        </el-row>
        <!---------------------------------------------------------------------------------------------- -->

        <el-row>
          <el-form-item>
            <template>
              <el-col :span="6"> 【学科】： {{itemList.subjectName}}</el-col>
              <el-col :span="6"> 【目录】： {{itemList.directoryName}}</el-col>
              <el-col :span="6">【方向】： {{itemList.direction}}</el-col>
            </template>
          </el-form-item>
        </el-row>
        <el-form-item>
          <template>
            <hr>
            【题干】：<span v-html="itemList.question" />
            <template>
              <div v-if="showQuestion==='1'">
                <p>单选题 选项：（以下选中的选项为正确答案）</p>
                <el-radio
                  v-for="item in itemList.options"
                  v-model="radio"
                  :label="item.isRight"
                  :key="item.id"
                >
                  {{item.title}}
                </el-radio>
              </div>
              <div v-if="showQuestion==='2'">
                <p>多选题 选项：（以下选中的选项为正确答案）</p>
                <el-checkbox-group v-model="getList">
                  <el-checkbox
                    :label="item.title"
                    v-for="item in itemList.options"
                    :key="item.id"
                  />
                </el-checkbox-group>
              </div>
              <div v-if="showQuestion==='3'" />
            </template>
            <hr>
          </template>
        </el-form-item>
        <el-form-item>
          <template>
            【参考答案】：<el-button type="danger" @click="print=true">视频答案预览</el-button>
            <div v-if="print">
              <video width="" height="" :src="itemList.videoURL" controls />
            </div>
            <hr>
          </template>
        </el-form-item>
        <el-form-item>

          <span> 【答案解析】：</span>
          <span v-html="itemList.answer" />
          <hr>

        </el-form-item>
        <el-form-item>
          <template>
            【题目备注】：{{itemList.remarks}}
            <hr>
          </template>
        </el-form-item>
      </el-form>
      <template>
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {
    // 弹框的显示与隐藏
    isShow: {
      type: Boolean,
      default: false
    },
    // 表格数据
    tableData: {
      type: Array,
      required: true
    },
    itemList: {
      type: Object,
      required: true
    },
    showQuestion: {
      type: String,
      required: true
    }

  },
  data () {
    // const checkList = itemList.options.filter(i => i.isRight === 1)
    return {
      radio: 1,
      checked: true,
      print: false,
      checkList: []
    }
  },

  methods: {
    // 弹框隐藏
    handleClose () {
      this.$emit('update:isShow', false)
      this.print = false
      // console.log(this.itemList)
    }
  },
  computed: {
    questionType () {
      if (this.itemList.questionType === 1) {
        return '单选题'
      } else if (this.itemList.questionType === 2) {
        return '多选题'
      } else {
        return '简答题'
      }
    },
    difficulty () {
      if (this.itemList.difficulty === 1) {
        return '简单'
      } else if (this.itemList.difficulty === 1) {
        return '一般'
      } else {
        return '困难'
      }
    },
    getList () {
      const arr = []
      this.itemList.options.forEach(i => {
        if (i.isRight === 1) {
          arr.push(i.title)
        }
      })
      return arr
    }

  }

}
</script>

<style scoped lang='less'></style>
